<template>
  <a-input
    :class="{ customSuffix: customSuffix }"
    :placeholder="placeholder"
    :prefix="prefix"
    :suffix="suffix"
    :allow-clear="allowClear"
    :type="type"
    :rows="row"
    :size="size"
    :defaultValue="defaultValue"
    :value="value"
    @input="updateVal($event.target.value)"
    @pressEnter="pressEnter"
    @change="emitUpdateEvent(prop)"
  >
    <template v-for="sloteItem in sloteOptions">
      <a-icon
        v-if="sloteItem.type === 'icon'"
        :slot="sloteItem.position"
        :type="sloteItem.sloteType"
        :key="sloteItem.type"
      />
      <a-tooltip
        v-if="sloteItem.type === 'tooltip'"
        :slot="sloteItem.position"
        :title="sloteItem.title"
        :key="sloteItem.type"
      >
        <a-icon
          :type="sloteItem.childOptions.sloteType"
          :style="sloteItem.childOptions.style"
        />
      </a-tooltip>
      <a-button
        v-if="sloteItem.type === 'enterButton'"
        :slot="sloteItem.position"
        :key="sloteItem.key"
      >
        <span v-if="sloteItem.isSlote">
          <slot name="sloteButton"></slot>
        </span>
        <span v-else>{{ sloteItem.title }}</span>
      </a-button>
    </template>
  </a-input>
</template>

<script>
export default {
  props: {
    sloteOptions: Array,
    customSuffix: Boolean,
    allowClear: Boolean,
    prop: String,
    placeholder: String,
    prefix: String,
    suffix: String,
    defaultValue: String,
    size: String,
    type: String,
    row: {
      type: Number,
      default: () => 4
    },
    value: String
  },
  data() {
    return {}
  },
  methods: {
    emitUpdateEvent(prop) {
      this.$emit('emit-update-event', prop)
    },
    updateVal(value) {
      this.$emit('input', value)
    },
    pressEnter() {
      this.$emit('pressEnter')
    }
  }
}
</script>
